﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width" />
    <title>生产管理轨道</title>
    <script src="../Content/scripts/jquery-1.11.1.min.js"></script>
    <script src="../Content/scripts/bootstrap/bootstrap.min.js"></script>
    <link href="../Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <script src="../Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link href="../Content/styles/font-awesome.min.css" rel="stylesheet" />
    <link href="../Content/adminLTE/css/index.css" rel="stylesheet" />
    <link href="../Content/scripts/plugins/jqgrid/jqgrid.css" rel="stylesheet" />
    <link href="../Content/styles/learun-ui.css" rel="stylesheet" />
    <script src="../Content/scripts/plugins/layout/jquery.layout.js"></script>
    <script src="../Content/scripts/plugins/dialog/dialog.js"></script>
    <script src="../Content/scripts/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../Content/scripts/plugins/jqgrid/jqgrid.min.js"></script>
    <script src="../Content/scripts/utils/learun-ui.js"></script>
    <script src="../Content/scripts/utils/learun-form.js"></script>
    <script src="../My97DatePicker/WdatePicker.js"></script>
    <script src="../js/highcharts.js"></script>
    <script src="../js/highcharts-3d.js"></script>
    <script src="../js/exporting.js"></script>

    <style type="text/css">
        body {
            margin: 10px;
            margin-bottom: 0px;
        }

        .form .formTitle {
            width: 450px;
            font-size: 25px;
        }

        .valuestyle {
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="ui-layout" id="layout" style="height: 800px; width: 100%;">
        <!--统计信息列表-->
        <div class="ui-layout-west">
            <div class="west-Panel">
                <div class="panel-Title">轨道生产信息</div>

                <table class="form" id="ruleinfo" style="margin-top:50px; margin-bottom:50px; height: 650px;">
                    <tr>
                        <th class="formTitle">入库满纱数量:</th>
                        <td class="formValue">
                            <label class="valuestyle">100</label>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">出库满纱数量:</th>
                        <td class="formValue">
                            <label class="valuestyle">100</label>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">库存满纱数量:</th>
                        <td class="formValue">
                            <label class="valuestyle">100</label>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">库存空管数量:</th>
                        <td class="formValue">
                            <label class="valuestyle">100</label>
                        </td>
                    </tr>

                </table>
            </div>
        </div>

        <!--统计信息折线图-->
        <div class="ui-layout-center">
            <div class="center-Panel">
                <div class="panel-Title">满纱数量与入库数量占比</div>
                <div id="container" style="width: 100%; height: 750px; text-align:center;  margin: 0 auto">

                </div>

            </div>
        </div>
    </div>

    <script>

        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            west: {
                size: $(window).width() * 0.5
            },
            onresize: function () {
                $(window).resize()
            }
        });

        var chart = Highcharts.chart('container', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: '当日出库满纱数量占比',
                style: {
                    fontSize: '20px'
                },
                y: 50
            },

            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    },
                    showInLegend: true // 设置饼图是否在图例中显示
                }

            },
            series: [{
                type: 'pie',
                name: '当日出库满纱数量占比',
                data: [
						['出库满纱', 45.0],
						['未出库满纱', 55.0]
                ]
            }]
        });

    </script>
</body>
</html>
